{% extends "dvaui/base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Full text search & OCR annotations</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
    <div class="row">
        <div class="col-lg-6 text-center col-lg-offset-3">
            <div class="box-primary box">
                <div class="box-body">
                <form action="." method="get">
                    <div class="row">
                        {% if q %}
                            <div class="col-lg-12"><input class="form-control" id="q" name="q" required="required" value="{{ q }}" placeholder="enter text to search" /></div>
                        {% else %}
                            <div class="col-lg-12"><input class="form-control" id="q" name="q" required="required" placeholder="enter text to search" /></div>
                        {% endif %}
                    </div>
                    <div class="row" style="margin-top:10px">
                        <div class="col-md-1 form-group"><label for="regions" class="form-group text-center">Regions<input type="checkbox" checked="checked"  class=""  id="regions" name="regions"/></label></div>
                        <div class="col-md-1 form-group"><label for="frames" class="form-group text-center">Frames<input type="checkbox" checked="checked"  class="" id="frames" name="frames"/></label></div>
                        <div class="col-md-6 form-group">
                            <select class="js-example-basic-single" id="video_pk" name="video_pk" style="width:100%">
                                <option value="" selected="selected">Search all videos/datasets</option>
                            {% for v in videos %}
                                <option value="{{ v.pk }}">{{ v.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="text-center col-md-3 form-group"><button type="submit" class="btn btn-primary btn-block"><i class="fa fa-search"></i> Search</button></div>

                    </div>
                    {% csrf_token %}
                </form>
                </div>
                {% if q %}
                <div class="box-footer text-center">
                    <form action="." method="get">
                    <input type="hidden" name="q" value="{{ q }}" />
                    <input type="hidden" name="offset" value="{{ next }}" />
                    <div class="row">
                        <div class="col-md-4">
                            <h4>Query: {{ q }} </h4>
                        </div>
                        <div class="col-md-2"><h4>{{ offset }} to {{ limit }}</h4></div>
                        <div class="col-md-1 form-group"><label for="regions" class="form-group text-center">Regions<input type="checkbox" checked="checked"  class=""  id="regions" name="regions"/></label></div>
                        <div class="col-md-1 form-group"><label for="frames" class="form-group text-center">Frames<input type="checkbox" checked="checked"  class="" id="frames" name="frames"/></label></div>
                        <div class="col-md-3 text-center form-group"><button style="margin-top:10px" type="submit" class="btn btn-primary"><i class="fa fa-forward"></i> Next {{ delta }}</button></div>
                    </div>
                    {% csrf_token %}
                    </form>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="row" style="margin-top:20px">
        <div class="col-lg-12">
            {% if results %}
                {% if results.regions_meta or results.regions_name %}
                <div class="box box-primary">
                    <div class="box-header"><h4>Results: regions metadata text</h4></div>
                    <div class="box-body">
                    <table class="table dataTables">
                    <thead>
                    <tr>
                        <th class="text-center">Video</th>
                        <th class="text-center">Frame index</th>
                        <th class="text-center">Object name</th>
                        <th class="text-center">Text</th>
                        <th class="text-center">details</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for r in results.regions_meta %}
                        <tr>
                            <td>{{ r.video.name }}</td>
                            <td>{{ r.frame.frame_index }}</td>
                            <td>{{ r.object_name }}</td>
                            <td>{{ r.text }}</td>
                            <td class="text-center"><a href="/frames/by_index/{{ r.video_id }}/{{ r.frame_index }}">details</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    </table>
                    </div>
                </div>
                <div class="box box-primary">
                    <div class="box-header"><h4>Results: regions object name</h4></div>
                    <div class="box-body">
                    <table class="table dataTables">
                    <thead>
                    <tr>
                        <th class="text-center">Video</th>
                        <th class="text-center">Frame index</th>
                        <th class="text-center">Object name</th>
                        <th class="text-center">Text</th>
                        <th class="text-center">details</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for r in results.regions_name %}
                        <tr>
                            <td>{{ r.video.name }}</td>
                            <td>{{ r.frame.frame_index }}</td>
                            <td>{{ r.object_name }}</td>
                            <td>{{ r.text }}</td>
                            <td class="text-center"><a href="/frames/by_index/{{ r.video_id }}/{{ r.frame_index }}">details</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    </table>
                    </div>
                </div>
                {% endif %}
                {% if results.frames_name %}
                <div class="box box-primary">
                    <div class="box-header"><h4>Results: frame names</h4></div>
                    <div class="box-body">
                    <table class="table dataTables">
                    <thead>
                    <tr>
                        <th class="text-center">Name</th>
                        <th class="text-center">details</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for f in results.frames_name %}
                        <tr>
                            <td>{{ f.name }}</td>
                            <td class="text-center"><a href="/frames/{{ f.pk }}">details</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                    </table>
                    </div>
                </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
        var selected_video_id = $("#video_pk");
        selected_video_id.select2({theme: "bootstrap"});

    })
</script>
{% endblock %}
